<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>

<body>
  <canvas id="c1" width="800" height="800"></canvas>
</body>
<script>

  let c1 = document.querySelector('#c1')

  let Cxt = c1.getContext('2d')
  //  translate (X轴的偏移量,Y轴的偏移量)
  //保留画笔状态
  Cxt.save()
  Cxt.fillStyle = 'pink'
  Cxt.fillRect(100, 100, 300, 100)
  Cxt.translate(100, 200)
  Cxt.rotate(-Math.PI / 3) // 旋转坐标轴
  Cxt.scale(2, 2)//缩放
  // 恢复之前保留的画笔状态
  Cxt.restore()
  Cxt.fillStyle = 'blue'
  Cxt.fillRect(0, 0, 100, 100)
</script>

</html>